<template>
    <Modal :mask-closable="false"
            v-model="orderDetailVisible"
            :title="`${$t('common.Checkorder')}`"
            :fullscreen="true"
            :footer-hide="true"
    >
        <div class="basic-info">
            <div class="basic-info-title">
                <h2>{{$t('fault.WorkOrderInformation')}}</h2>
            </div>
            <div class="basic-info-body">
                <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.RepairFormNumber')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.workorderNo }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.FaultTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.faultTime }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.ApplicationTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.createTime }}</Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.AppliedBy')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.createBy }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.Description')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                <Tooltip max-width="200" v-if="detailObj.faultNote">
                                    <div class="over-wrapper">{{ detailObj.faultNote }}</div>
                                    <div slot="content">
                                        <p>{{ detailObj.faultNote }}</p>
                                    </div>
                                </Tooltip>
                                <div class="preview" v-if="detailObj.photos && detailObj.photos.length">
                                    <Badge :count="detailObj.photos ? detailObj.photos.length : 0">
                                        <div class="preview-img">
                                            <viewer :images="detailObj.photos">
                                                <img
                                                        v-for="(src,index) in detailObj.photos"
                                                        :src="src"
                                                        :key="index"
                                                        style="width:40px;height:40px;overflow: hidden;"
                                                >
                                            </viewer>
                                        </div>
                                    </Badge>
                                </div>
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.ImpactProduction')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.effected }}</Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.Priority')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.urgentLevel }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.EscalationLevel')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.orderLevel }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.Productionsupervisor')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.confirmBy }}</Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.ConfirmedTimeByProduction')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.adminConfirmTime ? $moment(detailObj.adminConfirmTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.Accept')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.receBy }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.AcceptingTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.receTime ? $moment(detailObj.receTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('maintenance.ConfirmedTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.deterTime ? $moment(detailObj.deterTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('preliminary.ConfimedBy')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.outConfirmBy }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.OutsourcingTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.outConfirmTime ? $moment(detailObj.outConfirmTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.StartTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.startTime ? $moment(detailObj.startTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.FinishTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.completeTime ? $moment(detailObj.completeTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.acceptanceBy')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.acceptBy }}</Col>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col span="8" style="border-bottom: 1px solid #eee;">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.AcceptanceTime')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.acceptTime ? $moment(detailObj.acceptTime).format('YYYY-MM-DD HH:mm:ss') : ''}}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8" style="border-bottom: 1px solid #eee;">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('common.phone')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.faultPhone }}</Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
        <div class="basic-info">
            <div class="basic-info-title">
                <h2>设备信息</h2>
            </div>
            <div class="basic-info-body">
                <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('maintenance.EquipmentName')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.deviceName }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('maintenance.machineno')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.deviceNo }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('maintenance.EquipmentNo')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.deviceMId }}</Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10" >{{$t('maintenance.EquipmentType')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.categoryName }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('common.ProductionDescription')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.productionLine }}</Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('preliminary.UseEntity')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.useCompanyName }}</Col>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col span="8" style="border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('common.Headdepartment')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.belongDeptAdminName }}</Col>
                        </Row>
                    </Col>
                    <Col span="8" style="border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('common.Headdepartment')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.factoryAdminName }}</Col>
                        </Row>
                    </Col>
                    <Col span="8" style="border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('common.productionmaterial')}}</Col>
                            <Col class="basic-info-body-item" span="14">{{ detailObj.productNo }}</Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
        <div class="basic-info">
            <div class="basic-info-title">
                <h2>故障判定记录</h2>
            </div>
            <div class="basic-info-body">
                <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.FaultClassification')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.firstclass ? `${detailObj.firstclass}/${detailObj.secondclass}` : '' }}
<!--                                <Select v-model="detailObj.faultId" style="width:100%" disabled>-->
<!--                                    <Option v-for="item in mainTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
<!--                                </Select>-->
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">故障信息</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.elecFaultNote }}
<!--                                <Input v-model="detailObj.elecFaultNote" disabled/>-->
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">电路板指示灯信息</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.lightInfo }}
                                <!--                                <Input v-model="detailObj.lightInfo" disabled/>-->
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">设备有无损坏</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.broken == 1 ? '有' : '无'  }}
<!--                                <Input v-model="detailObj.broken" disabled/>-->
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('common.Assistrepairman')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.assit }}
<!--                                <Input v-model="detailObj.assit" disabled/>-->
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('fault.RepairingMode')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.mainTyppe == 1 ? '自行维修' : detailObj.mainTyppe == 2 ? '保修期内维修' : detailObj.mainTyppe == 3 ? '委外维修' : '' }}
                                <!--                                <Select v-model="detailObj.mainTyppe" class="InputWrapper" style="width:100%" disabled>-->
                                <!--                                    <Option v-for="item in repairList" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
                                <!--                                </Select>-->
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row>
<!--                    v-show="detailObj.mainTyppe == 2 || detailObj.mainTyppe == 3"&ndash;&gt;-->
                    <Col span="8" style="border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">需求完工日期</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.requireTime }}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8" style="border-bottom: 1px solid #eee" v-show="detailObj.mainTyppe == 1">
                        <Row>
                            <Col class="basic-info-body-label" span="10">是否需要采购备件</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.purchased ? '是' : '否'}}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8" style="border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">故障原因分析</Col>
                            <Col class="basic-info-body-item" span="14">
                                <Tooltip max-width="200" v-if="detailObj.faultReason" style="margin-left: 10px">
                                    <div class="over-wrapper">{{ detailObj.faultReason }}</div>
                                    <div slot="content">
                                        <p>{{ detailObj.faultReason }}</p>
                                    </div>
                                </Tooltip>
                                <!--                                {{ detailObj.faultReason }}-->
                                <!--                                <Input v-model="detailObj.faultReason" disabled/>-->
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col span="8" style="border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">解决办法和预防措施</Col>
                            <Col class="basic-info-body-item" span="14">
                                <Tooltip max-width="200" v-if="detailObj.solutions" style="margin-left: 10px">
                                    <div class="over-wrapper">{{ detailObj.solutions }}</div>
                                    <div slot="content">
                                        <p>{{ detailObj.solutions }}</p>
                                    </div>
                                </Tooltip>
<!--                                {{ detailObj.solutions }}-->
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8" style="border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">{{$t('preliminary.Remarks')}}</Col>
                            <Col class="basic-info-body-item" span="14">
                                <Tooltip max-width="200" v-if="detailObj.elecWarn" style="margin-left: 10px">
                                    <div class="over-wrapper">{{ detailObj.elecWarn }}</div>
                                    <div slot="content">
                                        <p>{{ detailObj.elecWarn }}</p>
                                    </div>
                                </Tooltip>
                            </Col>
                        </Row>
                    </Col>
                </Row>
<!--                <Row>-->
<!--                    <Col span="8" style="border-bottom: 1px solid #eee">-->
<!--                        <Row>-->
<!--                            <Col class="basic-info-body-label" span="10">解决办法和预防措施</Col>-->
<!--                            <Col class="basic-info-body-item" span="14">-->
<!--                                {{ detailObj.solutions }}-->
<!--                                <Input v-model="detailObj.solutions" disabled/>-->
<!--                            </Col>-->
<!--                        </Row>-->
<!--                    </Col>-->
<!--                </Row>-->
            </div>
        </div>
        <div class="basic-info" v-show="detailObj.mainTyppe ==3">
            <div class="basic-info-title">
                <h2>委外记录</h2>
            </div>
            <div class="basic-info-body">
                <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">委外审批单据</Col>
                            <Col class="basic-info-body-item" span="14">
                                <div class="file-style" @click="handlePreview(detailObj.checkFileUrl)">{{ detailObj.checkFile }}</div>
                            </Col>
                        </Row>
                    </Col>
<!--                    <Col span="8">-->
<!--                        <Row>-->
<!--                            <Col class="basic-info-body-label" span="10">SAP申请单号</Col>-->
<!--                            <Col class="basic-info-body-item" span="14">-->
<!--                                {{ detailObj.sapNo }}-->
<!--&lt;!&ndash;                                <Input v-model="detailObj.sapNo" disabled/>&ndash;&gt;-->
<!--                            </Col>-->
<!--                        </Row>-->
<!--                    </Col>-->
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">委外验收单据</Col>
                            <Col class="basic-info-body-item" span="14">
                                <div class="file-style" @click="handlePreview(detailObj.acceptFileUrl)">{{ detailObj.acceptFile }}</div>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row style="border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">采购单号</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.poNo }}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">维修单位</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.maintainUnit }}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">委外验收单据</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.arriveDate }}
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
        <div class="basic-info" v-show="makeDataSource.length">
            <div class="basic-info-title">
                <h2>备件采购记录</h2>
            </div>
            <div class="basic-info-body">
               <Table
                       :columns="makeColumns"
                       :data="makeDataSource"
               />
            </div>
        </div>
        <div class="basic-info" v-show="statusText == 8 || statusText == 9 || statusText == 10 || statusText == 11">
            <div class="basic-info-title">
                <h2>维修记录</h2>
            </div>
            <div class="basic-info-body">
                <div class="tableContent">
                    <Table
                            :columns="repairColumns"
                            :data="repairDataSource"
                    >
                        <template slot-scope="{ row }" slot="action">
                            <span class="operationBtn" @click="handleRepairDetailList(row)">查看明细</span>
                        </template>
                    </Table>
                </div>
            </div>
        </div>
        <div class="basic-info" v-show="statusText == 10 || statusText == 11">
            <div class="basic-info-title">
                <h2>验收记录</h2>
            </div>
            <div class="basic-info-body">
                <Row>
                    <Col span="8" style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                        <Row>
                            <Col class="basic-info-body-label" span="10">维修结果</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.acceptResult == 1 ? '维修完成，设备正常' : `维修正常，有待观察${detailObj.days}天` }}
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
        <div class="basic-info" v-show="statusText == 11 && detailObj.acceptResult == 2">
            <div class="basic-info-title">
                <h2>复核记录</h2>
            </div>
            <div class="basic-info-body">
                <Row style="border-top: 1px solid #eee;border-bottom: 1px solid #eee">
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">复核结果</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.reviewResult }}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">复核人</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.reviewBy }}
                            </Col>
                        </Row>
                    </Col>
                    <Col span="8">
                        <Row>
                            <Col class="basic-info-body-label" span="10">复核时间</Col>
                            <Col class="basic-info-body-item" span="14">
                                {{ detailObj.reviewTime }}
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
<!--        <div slot="footer">-->
<!--            <Button type="default" @click="handleCancel">{{$t('common.Cancle')}}</Button>-->
<!--            <Button type="primary" :loading="loadingVisible" @click="handleOk">{{$t('maintenance.Confirmed')}}</Button>-->
<!--        </div>-->
        <!--编辑备件-->
        <repair-detail-list-modal ref="repairDetailListModal"/>
    </Modal>
</template>

<script>
    import RepairDetailListModal from "./repairDetailListModal";
    export default {
        name: "orderDetailModal",
        components: {
            RepairDetailListModal
        },
        data() {
            return {
                statusText: '',
                orderDetailVisible: false,
                detailObj: {},
                mainTypeList: [],
                equipmentConditions: [{id: 0, value: '否'},{id: 1, value: '是'}],
                repairList: [{value: 1, label: '自行维修'},{value: 2, label: '保修期内维修'},{value: 3, label: '委外维修'}],
                makeColumns: [
                    {
                        title: `${this.$t('common.SpareNumber')}`,
                        key: 'maCode',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'maModel',
                        align: 'center',
                        minWidth: 180,
                    },

                    {
                        title: '备件名称',
                        key: 'maName',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: 'SAP申请单号',
                        key: 'sapNo',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '所需数量',
                        key: 'useNum',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '采购数量',
                        key: 'purchaseNum',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                         title: `${ this.$t('maintenance.Unit') }`,
                        key: 'maUnit',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                         title: `${this.$t('spareParts.InventoryQuantity')}`,
                        key: 'stockNum',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '备件最新状态',
                        key: 'bjStatus',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                        title: '备件单价（元）',
                        key: 'maPrice',
                        align: 'center',
                        minWidth: 200
                    },
                    {
                       title: `${ this.$t('common.remarks') }`,
                        key: 'note',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '到位日期',
                        key: 'arriveDate',
                        align: 'center',
                        // minWidth: 120
                    },
                ],
                makeDataSource: [],
                repairColumns: [
                    {
                        title: '物料编号',
                        key: 'maCode',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '物料名称',
                        key: 'maName',
                        align: 'center',
                        minWidth: 120,
                        tooltip: true,
                    },

                    {
                        title: `${ this.$t('equipCheck.Model') }`,
                        key: 'maModel',
                        align: 'center',
                        minWidth: 180,
                        tooltip: true,
                    },
                    {
                         title: `${ this.$t('spareParts.usageAmount') }`,
                        key: 'useNum',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                         title: `${ this.$t('maintenance.Unit') }`,
                        key: 'maUnit',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('maintenance.Unitprice') }`,
                        key: 'maPrice',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                         title: `${ this.$t('maintenance.totalprice') }`,
                        key: 'totalPrice',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '处理方式及结果',
                        key: 'solutions',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修单位',
                        key: 'maintainUnit',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: '维修人',
                        key: 'maintainBy',
                        align: 'center',
                        minWidth: 120
                    },
                    {
                        title: `${ this.$t('common.operation') }`,
                        slot: "action",
                        align: 'center',
                        minWidth: 200
                    },
                ],
                repairDataSource: []
            }
        },
        created() {
           this.getMainList()
        },
        methods: {
            //获取故障数据
            getMainList() {
                this.axios({
                    method: 'get',
                    url: '/workorder/workorderFaultNature/selectList',
                    params: {}
                }).then(res => {
                    if (res.code === 200) {
                        this.mainTypeList = res.data
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            show(order, type) {
                console.log(order)
                this.statusText = type !='brokenReport' ? order.statusText : order.status
                this.orderDetailVisible = true
                this.getDetail(order)
            },
            //根据orderId判断，若有orderId则为待采购清单的详情，否则为工单大厅的详情
            getDetail(order) {
                let params = {
                    id: order.orderId ? order.orderId : order.id,
                    workorderNo: order.workorderNo
                }
                this.axios({
                    method: 'post',
                    url: '/workorder/workorder/queryById',
                    data: params
                }).then(res => {
                    if (res.code === 200) {
                        this.detailObj = res.data
                        this.detailObj.photos = res.data.pics ? res.data.pics.split(',') : []
                        this.makeDataSource = res.data.workorderRecordList1 ? res.data.workorderRecordList1 : []
                        this.repairDataSource = res.data.workorderRecordList2 ? res.data.workorderRecordList2 : []
                        this.detailObj.purchased = res.data.purchased ? res.data.purchased : 0
                        this.detailObj.mainTyppe = res.data.mainType
                    }else {
                        this.$Message.warning(({content:res.msg,duration:6,closable:true}))
                    }
                })
            },
            handleRepairDetailList(row) {
                this.$refs.repairDetailListModal.show(row, 'detail')
            },
            handlePreview(fileUrl) {
                window.open(fileUrl)
                // console.log(fileUrl.split(';'))
                // let url = fileUrl ? fileUrl.split(';')[1] : ''
                // if (url) {
                //     window.open(url)
                // }
            }
        }
    }
</script>

<style scoped lang="scss">
    .basic-info {
        .basic-info-title {
            span {
                display: inline-block;
                width: 7px;
                height: 24px;
                background: #187bdb;
            }
            h2 {
                display: inline-block;
                font-size: 16px;
                padding-left: 10px;
                position: relative;
                &::before {
                    content:"";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 7px;
                    height: 24px;
                    background: #187bdb;
                }
            }
        }
        .basic-info-body {
            margin: 10px;
            color: #333;
            font-size: 13px;
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
            border-left: 1px solid #eee;
            .basic-info-body-label {
                display: inline-block;
                width: 40%;
                height: 30px;
                line-height: 30px;
                background: #f5f6f7;
                text-align: right;
                padding-right: 10px;
                /*border-left: 1px solid #B6B7B7;*/
                /*border-top: 1px solid #B6B7B7;*/
                /*border-bottom: 1px solid #B6B7B7;*/
            }
            .basic-info-body-item {
                display: inline-block;
                width: 60%;
                height: 30px;
                line-height: 30px;
                text-align: left;
                padding: 0 10px;
                border-left: 1px solid #eee;
                border-right: 1px solid #eee;
                /*border-right: 1px solid #B6B7B7;*/
                /*border-top: 1px solid #B6B7B7;*/
                /*border-bottom: 1px solid #B6B7B7;*/
                .preview {
                    position: absolute;
                    right:10px;
                    top:0;
                    width: 30px;
                    height: 30px;
                    background: #eee;
                    .preview-img {
                        width: 30px;
                        height: 30px;
                        overflow: hidden;
                    }
                }
            }
        }
        .file-style {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #187bdb;
            cursor: pointer;
        }
    }
    .over-wrapper {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
